<template>
  <div id="showVideo">
    <el-dialog
      id="showVideoDilog"
      class="about-set"
      :title="title"
      :visible.sync="videoData.isShow"
      width="800px"
      :before-close="labelHandleClose"
      :append-to-body="true"
    >
      <div id="player" v-loading="loading"></div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'showVideo',
  msg: '',
  props: ['videoData'],
  data() {
    return {
      title: '',
      loading: true,
      player: null,
      playObj: {
        wrap: '#player',
        width: 800,
        height: 500,
        vid: '',
        speed: [1.5, 2.0, 3.0],
        flash: false, // 默认使用flash插件播放
        forceH5: true,
        autoplay: true // 默认自动播放
      },
      token: ''
    }
  },
  mounted() {
    this.title = this.videoData.title ? this.videoData.title : '视频播放预览'
    this.playObj.vid = this.videoData.vid
    if (this.videoData.playsafe) {
      //需要token加密
      this.getToken()
    } else {
      setTimeout(() => {
        this.videoInit()
      }, 200)
    }
  },
  methods: {
    /* 视频初始化 */
    videoInit() {
      /* 此处不要注销，注销后视频无法播放 */
      this.player = polyvPlayer(this.playObj)
      this.loading = false
    },
    // 获取播放器token
    getToken() {
      let url = `/platforms/polyv/token`
      let params = {
        vId: this.videoData.vid
      }
      this.pubRequire('get', url, params, (response) => {
        this.playObj.playsafe = response
        this.videoInit()
      })
    },
    /* 关闭 */
    labelHandleClose(done) {
      this.player.destroy()
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.videoData.vid = ''
      this.videoData.title = ''
      this.videoData.playsafe = false
      this.videoData.isShow = false
    }
  }
}
</script>

<style lang="less">
#showVideoDilog {
  .el-dialog__body {
    padding: 0 !important;
    /* height:500px;*/
  }
  .el-dialog__header {
    border-bottom: 1px solid #eee;
    padding: 7px 20px 6px;
    .el-dialog__title {
      font-size: 14px;
      color: #0d1636;
    }
  }
  .el-dialog__headerbtn {
    top: 7px;
  }
  #player {
    width: 800px;
    height: 500px;
    background: #000;
    /*position: fixed;
              top: 50%;
              left: 50%;
              width: 800px;
              height: 500px;
              margin: -250px 0 0 -400px;
              z-index: 9999;*/
  }
}
#showVideo {
  box-sizing: border-box;

  .el-dialog__body {
    padding: 0 !important;
    /* height:500px;*/
  }

  #player {
    width: 800px;
    height: 500px;
    background: #000;
    /*position: fixed;
      top: 50%;
      left: 50%;
      width: 800px;
      height: 500px;
      margin: -250px 0 0 -400px;
      z-index: 9999;*/
  }
}
</style>
